<template>
  <el-container>
     <el-main>
       <el-row type="flex" justify="center">
        <span class="title">哪方面？</span>
      </el-row>
      <div class="content">
        <div class="entry-conainer" v-for="(item, index) in categoryList" :key="index">
           <el-button @click="onSubmit(item.categoryName)" class="button-category">
          {{item.categoryName}}
        </el-button>
        </div>
      </div>
     </el-main>
  </el-container>
</template>
<script>
import { updatePost } from "@/api/post";
export default {
  data() {
    return {
    };
  },
  computed: {
    categoryList() {
      return JSON.parse(sessionStorage.getItem('user')).categoryList
    }
  },
    mounted() {
      this.countDown()
    },
  methods: {
    onSubmit(categoryName) {
      let postId = sessionStorage.getItem('postId')
      updatePost(postId, {categoryName}).then(() => {
        this.$router.push("advice");
      })
    },
      countDown() {
        let timeout = setTimeout(() => {
          clearTimeout(timeout)
          this.$router.push('rate')
        }, 8000);
      }
  }
};
</script>
<style lang="scss" scoped>
  .el-main {
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .entry-conainer {
    width: 50%;
  }
  .button-category {
    width: calc(100% - .2rem);
    height: calc(100% - .2rem);
    margin: .1rem;
    font-size: .3rem;
  }
    .title {
    font-size: .3rem;
  }
</style>